<template>
  <div>
    <el-page-header class="AddTitle" @back="$router.back()">
      <span slot="content">{{ `${title}页面` }}</span>
    </el-page-header>
    <!-- 步骤条 -->
    <el-steps :active="active" simple class="addGoodsSteps">
      <el-step title="基本信息" icon="el-icon-edit"></el-step>
      <el-step title="SKU信息" icon="el-icon-circle-check"></el-step>
    </el-steps>
    <!-- 基本信息 -->
    <Mssg v-if="!isEditorMode" ref="FormComponentRef" :goods-id="goodsId" class="AddBox"></Mssg>
    <Sku v-else :goods-id="goodsId" :supplier-id="supplierId" :cate-code="cateCode"></Sku>
    <div style="margin: 20px 77px;text-align: left;">
      <el-button v-if="active != 1" size="medium" style="margin-left:-29px" @click="BtnBack">上一步</el-button>
      <el-button v-if="active != 2" size="medium" type="primary" style="margin-left: -29px;" @click="next">下一步</el-button>
      <el-button v-if="active == 2" size="medium" @click="comfirmOption">保存</el-button>
    </div>
  </div>
</template>

<script>
import Mssg from './components/Mssg'
import Sku from './components/Suk'
import { addGoods } from '@/api/goods'
export default {
  components: {
    Mssg,
    Sku
  },
  data() {
    return {
      title: '',
      formId: {
        goodsId: null, // 新增时返回的商品id
        attrList: []
      },
      storeId: '', // 商品列表里当前商品id
      active: 1,
      isEditorMode: false, // 编辑模式
      goodsId: '',
      supplierId: '',
      cateCode: ''
    }
  },
  created() {
    const vm = this
    vm.goodsId = vm.$route.params.id || ''
    vm.title = vm.$route.params.id ? '编辑' : '新增'
  },
  methods: {
    // 下一步
    next() {
      const vm = this
      const goodsForm = vm.$refs.FormComponentRef.goodsForm
      if (!vm.validForm(goodsForm)) {
        return false
      }
      vm.addStoreApi(goodsForm)
    },
    // 上一步
    BtnBack() {
      this.active = 1
      this.isEditorMode = false
    },
    // 保存商品
    async addStoreApi(data) {
      const vm = this
      const params = JSON.parse(JSON.stringify(data))
      const res = await addGoods(params)
      vm.active = 2
      vm.isEditorMode = true
      vm.goodsId = res.data.id
      vm.supplierId = params.supplierId
      vm.cateCode = params.secondCategoryId
      vm.$message({ message: '保存成功', type: 'success' })
    },
    comfirmOption() {
      this.$router.go(-1)
    },
    validForm(data) {
      const vm = this
      const formData = JSON.parse(JSON.stringify(data))
      if (!formData.name) {
        vm.$message.error('请输入商品名称!')
        return false
      }
      if (!formData.firstCategoryId) {
        vm.$message.error('请选择商品分类!')
        return false
      }
      if (!formData.secondCategoryId) {
        vm.$message.error('请选择商品二级分类!')
        return false
      }
      if (!formData.supplierId) {
        vm.$message.error('请选择商品供应商!')
        return false
      }
      if (!formData.fileList.length) {
        vm.$message.error('请上传商品图片!')
        return false
      }
      return true
    }
  }
}
</script>

<style scoped>
  .AddTitle{
    margin:20px;
  }
  .AddBox{
    padding: 20px 48px;
  }
  .addGoodsSteps{
    width: 40%;
    margin: auto;
    background:white;
  }
</style>

